import { editRootCategoryOrder, getRootCategoryOrder } from "@/services/systemKnowledge";
import { Button, Form, Modal, Radio, Spin, Table,Icon, message } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class SortModal extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      loading:false,
      list:[],
      current:1,
      total:0
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = () => {
    this.setState({
      visible:true,
      loading:true
    },async () => {
      const res = await getRootCategoryOrder()
      this.props.form.setFieldsValue({
        sortType:res.rootCategoryOrder.sortType,
        sortCondition:res.rootCategoryOrder.sortCondition
      })
      this.setState({
        loading:false,
        list:res.rootCategoryList,
        total:res.rootCategoryList.length
      })
    })
  }

  cancelModal = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      loading:false,
      list:[]
    })
  }

  doOk = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        const { list } = this.state;
        let obj = {
          sortCondition:values.sortCondition
        }
        if(values.sortCondition == 2){
          obj.rootCategoryLists = list
        }else{
          obj.sortType = values.sortType
        }
        this.doSort(obj)
      }
    })
  }

  doSort = async obj => {
    const res = await editRootCategoryOrder(obj);
    message.info(res.message);
    this.cancelModal()
    this.props.fetchList()
  }

  changePage = current => {
    this.setState({
      current
    })
  }

  upOrDown = (type,index) => {
    let { list } = this.state;
    if(type == 1){
      //上移
      list[index] = list.splice(index-1, 1, list[index])[0];
    }
    if(type == 2){
      //下移
      list[index] = list.splice(index+1, 1, list[index])[0];
    }
    this.setState({
      list
    })
  }

  render(){
    const { visible,loading,list,current,total } = this.state;
    const { form:{getFieldDecorator,getFieldValue} } = this.props
    const iconStyle = {
      fontSize:"20px",
      color:"#3e5bff",
      cursor:"pointer"
    }
    const iconDisabledStyle = {
      fontSize:"20px",
      pointerEvents: "none",
      opacity: "0.5"
    }
    const columns = [
      {
        title:formatMessage({ id: 'systemKnowledgeBase.serialNumber' }),
        dataIndex:"index",
        width:50,
        align:"center",
        render:(text,row,index) => {
          return (current - 1) * 15 + (index + 1)
        }
      },
      {
        title:formatMessage({ id: 'systemKnowledgeBase.knowledgeBaseName' }),
        dataIndex:"name",
        width:150,
        align:"center"
      },
      {
        title:formatMessage({ id: 'systemKnowledgeBase.operation' }),
        width:80,
        align:"center",
        render:(text,row,index) => {
          const currentIndex = (current - 1) * 15 + index
          return (
            <div>
              <Icon type="up-circle" style={current == 1 && index == 0 ? {...iconDisabledStyle,marginRight:16} : {...iconStyle,marginRight:16}} onClick={() => this.upOrDown(1,currentIndex)}/>
              <Icon type="down-circle" style={((current-1)*15 + index + 1) == total ? iconDisabledStyle : iconStyle} onClick={() => this.upOrDown(2,currentIndex)} />
            </div>
          )
        }
      }
    ]
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    return (
      <Modal
        title={formatMessage({ id: 'systemKnowledgeBase.sortKnowledgeBase' })}
        visible={visible}
        onCancel={this.cancelModal}
        onOk={this.doOk}
        width={800}
      >
        <Spin spinning={loading}>
          <Form {...formItemLayout}>
            <Form.Item label={formatMessage({ id: 'systemKnowledgeBase.sortCondition' })} style={{ display: 'flex', alignItems: 'center' }}>
              {
                getFieldDecorator("sortCondition",{ rules:[{required:true,message:formatMessage({ id: 'systemKnowledgeBase.pleaseSelectSortCondition' })}] })(
                  <Radio.Group>
                    <Radio value={0}>{formatMessage({ id: 'systemKnowledgeBase.creationTime' })}</Radio>
                    <Radio value={1}>{formatMessage({ id: 'systemKnowledgeBase.modificationTime' })}</Radio>
                    <Radio value={2}>{formatMessage({ id: 'systemKnowledgeBase.customOrder' })}</Radio>
                  </Radio.Group>
                )
              }
            </Form.Item>
            {
              getFieldValue("sortCondition") == 2 ? (
                <Form.Item label={formatMessage({ id: 'systemKnowledgeBase.orderSelection' })}>
                  <Table
                    columns={columns}
                    dataSource={list}
                    scroll={{y:"40vh",x:"auto"}}
                    pagination={{
                      current,
                      pageSize:15,
                      onChange:this.changePage
                    }}
                  />
                </Form.Item>
              ) : (
                <Form.Item label={formatMessage({ id: 'systemKnowledgeBase.orderSelection' })} style={{ display: 'flex', alignItems: 'center' }}>
                  {
                    getFieldDecorator("sortType",{ rules:[{required:true,message:formatMessage({ id: 'systemKnowledgeBase.pleaseSelectSortCondition' })}] })(
                      <Radio.Group>
                        <Radio value={0}>{formatMessage({ id: 'systemKnowledgeBase.descendingOrder' })}</Radio>
                        <Radio value={1}>{formatMessage({ id: 'systemKnowledgeBase.ascendingOrder' })}</Radio>
                      </Radio.Group>
                    )
                  }
                </Form.Item>
              )
            }
          </Form>
        </Spin>
      </Modal>
    )
  }
}

export default Form.create()(SortModal)
